<template>
  <div class="main">
    <div class="typeButtons">
      <el-tabs v-model="queryInfo.type" @tab-click="handleTabChange">
        <el-tab-pane
            v-for="(state, index) in states"
            :key="index"
            :name="index">
          <span slot="label"><span v-html="state"></span></span>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 活动信息 -->
    <el-table
        :stripe="true"
        :data="activities"
    >
      <el-table-column
          type="expand"
          width="70"
      >
        <template v-slot="props">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="活动名称"><span>{{ props.row.title }}</span></el-form-item>
            <el-form-item label="创建时间"><span>{{ props.row.createTime }}</span></el-form-item>
            <!--            <el-form-item label="活动创建人"><span>{{props.row.createPerson}}</span></el-form-item>-->
            <el-form-item label="报名人数"><span>{{ props.row.teamNum }} 队伍 , 共计 {{ props.row.totalNum }} 人</span>
            </el-form-item>
            <el-form-item label="限制条件">
              <!-- 小队限制 -->
              <el-tag v-if="props.row.activitySize > 0" type="primary" size="small">最多{{ props.row.activitySize }}个队伍</el-tag>
              <el-tag v-if="props.row.teamSize > 0" type="primary" size="small">每队最多{{ props.row.teamSize }}个成员</el-tag>
              <!-- 学生限制 -->
              <el-tag v-for="id in props.row.collegeIdList" :key="id" type="info" size="small">{{ collegeMap[id] }}</el-tag>
              <el-tag v-for="id in props.row.majorIdList" :key="id" type="info" size="small">{{ majorMap[id] }}专业</el-tag>
              <el-tag v-for="grade in props.row.gradeList" :key="grade" type="info" size="small">{{ grade}}级</el-tag>
              <el-tooltip class="item" effect="dark" content="修改限制条件" placement="top-start">
                <el-button
                    class="button-new-tag"
                    size="mini"
                    circle
                    icon="el-icon-refresh"
                    @click.stop="updateLimitation"
                />
              </el-tooltip>
            </el-form-item>
            <el-form-item label="活动原文">
              <el-button type="success" plain size="mini"
                         @click="openDialog(props.row)"
              >点击查看
              </el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          type="index"
          label="#"
          width="70"
      />
      <el-table-column
          label="活动名称"
          prop="title"
      />
      <el-table-column
          label="创建时间"
          prop="createTime"
          width="200"
      />
      <el-table-column
          label="目前报名队伍"
          width="200"
          prop="teamNum"
      />
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
          @size-change="handleQueryChange"
          @current-change="handleQueryChange"
          :current-page.sync="queryInfo.pageNum"
          :page-sizes="[10, 30, 50]"
          :page-size="queryInfo.pageSize"
          layout="sizes, prev, pager, next"
          :total="totalNum">
      </el-pagination>
    </div>

    <!-- 活动详情框 -->
    <el-dialog
        id="activityDetailDialog"
        :visible.sync="showDetailDialog"
        width="60%"
        :modal-append-to-body='false'
        append-to-body>

      <el-dialog
          width="80%"
          title="修改详情"
          :visible.sync="innerChangeContent"
          append-to-body>

       <el-form>
         <!--        活动时间选择-->
         <el-form-item
             label="活动时间"
             prop="activityTime">
           <div>
             <el-date-picker
                 v-model="dialogActivity.activityTime"
                 type="datetimerange"
                 :picker-options="pickerOptions1"
                 range-separator="至"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 align="left">
             </el-date-picker>
           </div>
         </el-form-item>

         <!--        报名时间选择-->
         <el-form-item
             label="报名时间"
             prop="applyTime">
           <div>
             <el-date-picker
                 v-model="dialogActivity.applyTime"
                 type="datetimerange"
                 :picker-options="pickerOptions2"
                 range-separator="至"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 align="left">
             </el-date-picker>
           </div>
         </el-form-item>

         <quillEditor ref="oldContent"
                      v-model="dialogActivity.newContent"
         />
       </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="innerChangeContent = false">取 消</el-button>
          <el-button type="primary" @click="submitChange">编辑成功</el-button>
        </div>
      </el-dialog>

      <template slot="title">{{ dialogActivity.title }}</template>
      <showActivityDetail :detail="dialogActivity"/>


      <template slot="footer">
        <el-button type="success" size="small" plain @click="changeContent">修改内容</el-button>
      </template>
    </el-dialog>

    <!-- TODO 更新限制条件 -->
    <el-dialog
        id="activityLimitDialog"
        :visible.sync="showLimitDialog"
        width="60%"
        :close-on-click-modal=false
        :modal-append-to-body='false'
    >

    </el-dialog>

  </div>
</template>

<script>
import RequestUtil from "@/utils/RequestUtil";
import quillEditor from "../../../views/components/quillEdior"

let nowYear = new Date().getFullYear()


import showActivityDetail from "../../components/showActivityDetail"
import areas from "../../../plugins/region"

export default {
  name: 'ActivityCollegeManage',
  components: {
    showActivityDetail,
    quillEditor
  },
  data() {
    return {
      showDetailDialog: false,
      dialogActivity: {
        id: '',
        title: '',
        newContent: '',
        createTime: '',
        activityTime: [],
        applyTime: []
      },
      collegeMap: {},
      majorMap: {},
      showLimitDialog: false,
      restriction: {
        area: areas,
        college: [],
        grade: [
          nowYear,
          nowYear - 1,
          nowYear - 2,
          nowYear - 3,
          nowYear - 4,
        ],
        sex: [
          {
            id: '1',
            sex: '男'
          },
          {
            id: '2',
            sex: '女'
          },
        ],
        teamSize: '',
        teamNumber: ''
      },
      activities: [],
      activeType: 100,
      states: {
        1: '<span style="color: #50ae7b" slot="label"> <i class="el-icon-s-help"></i> 已发布活动</span>',
        2: '<span style="color: #50ae7b" slot="label"> <i class="el-icon-s-help"></i> 未发布活动</span>',
        3: '<span style="color: #316a4b" slot="label"> <i class="el-icon-s-order"></i> 历史活动</span>',
      },
      queryInfo: {
        keyword: '',
        pageSize: 10,
        pageNum: 1,
        collegeId: '',
        type: ''
      },
      totalNum: 0,
      innerChangeContent: false,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
        },
        shortcuts: [{
          text: '未来一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '未来一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '未来三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
        },
        shortcuts: [{
          text: '未来一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '未来一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '未来三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  async created() {
    this.getActivityList()
    this.collegeMap = RequestUtil.listToMap(
        await RequestUtil.sendCacheableRequest("collegeList", '/auth/getCollegeList')
    )
    this.majorMap = RequestUtil.listToMap(
        await RequestUtil.sendCacheableRequest("majorList", '/auth/getMajorList')
    )
  },
  methods: {
    getActivityList() {
      this.$axios.get(`${this.HOST}/activity/university/activities`, {
        params: this.queryInfo
      }).then(res => {
        console.log("q", res);
        this.activities = res.data.data.list;
        this.totalNum = res.data.data.total
      })
    },
    handleTabChange() {
      // console.log(this.activeType)
      this.handleQueryChange()
    },
    handleQueryChange() {
      console.log(this.queryInfo)
      this.getActivityList()
    },
    openDialog(activity) {
      this.showDetailDialog = true;
      this.dialogActivity.id = activity.id
      this.dialogActivity.title = activity.title
      this.dialogActivity.createTime = activity.createTime
      this.dialogActivity.content = activity.content
    },
    updateLimitation() {
      this.showLimitDialog = true
    },
    changeContent() {
      this.innerChangeContent = true
    },
    submitChange() {
      this.$axios.put(`${this.HOST}activity/manage/editDetail`,{
        id: this.dialogActivity.id,
        activityTime: this.dialogActivity.activityTime,
        applyTime: this.dialogActivity.applyTime,
        content: this.dialogActivity.newContent
      }).then(res => {
        this.$message({
          message: res.data.message,
          type: 'success',
          offset: 90,
          duration: 1000
        })
        this.$router.push('/activities/manage')
      })
    }
  }
}
</script>

<style lang="less" scoped>

.el-table {
  width: 100%;
  //background-color: red;
}

.block {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

/deep/ .table-expand {
  padding-left: 50px;
  font-size: 0;
  display: flex;
  flex-direction: column;

  label {
    width: 90px;
    color: #99a9bf;
  }

  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    //width: 50%;
  }

  .el-tag {
    margin-right: 10px;
  }
}

</style>
